<template>
    <div>
    <h1>子组件</h1>
    <h2>{{info}}</h2>
    <h2>{{obj}}</h2>
    <h2>{{msg.msg}}</h2>
    <h2>{{msg1}}</h2>
    <h2>vue2当中attrs的用法</h2>
    <h2>{{$attrs.msg}}</h2>
    <h2>{{}}</h2>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'

export default defineComponent({
    // props:["info","obj"], 
//
    props:{
        info:{
            type:String,
            required:true,
            default:'xxx'
        },
        obj:{
            type:Object,
            required:false,
            default:()=>{
                return{}
            },
        },
    },
    setup (props,context) {
        console.log(props);
        console.log(props.info);
        console.log(props.obj);
        console.log(context);
        console.log(context.attrs);
        console.log(context.attrs.msg);
        const msg = context.attrs;
        const msg1 = ref(context.attrs.msg);
        return {
            msg,
            msg1,
        };
    },
    mounted(){
        console.log(this.$attrs);
    }
});
</script>

<style scoped>

</style>